<template>
    <div class="app cloak" :class="isready==true?'clear_cloak':''">
        <img src="/static/images/banners.jpg" alt="" class="banner">
        <div class="form">
            <div class="form_box">
                <div class="title">活动信息</div>
                <div class="line">
                    <div class="label">活动区域</div>
                    <div class="input"><input type="text" :value="info.first_area_name+'-'+info.second_area_name"
                                              readonly @click="back()"></div>
                </div>
            </div>
            <div class="form_box">
                <div class="title">作品信息</div>
                <div class="line" v-if="form[0]">
                    <div class="label">作品名称</div>
                    <div class="input"><input type="tel" data-name="title" placeholder="请输入" :value="info.title"
                                              @change="setinput"></div>
                </div>
                <div class="line" v-if="form[1]">
                    <div class="label">作品类别</div>
                    <div class="input">
                        <radio-group @change="settype" data-name="type">
                            <radio value="1" :checked="info.type==1"/>
                            <text>诗歌散文</text>
                            <radio value="2" :checked="info.type==2"/>
                            <text>小说故事</text>
                        </radio-group>
                    </div>
                </div>
                <div class="line" v-if="form[2]">
                    <div class="label">指导教师</div>
                    <div class="input"><input type="tel" data-name="teacher" placeholder="请输入" :value="info.teacher"
                                              @change="setinput"></div>
                </div>

                <div class="line" v-if="media_type==2">
                    <div class="label">视频处理</div>
                    <div class="input">
                        <radio-group @change="setcompressed" data-name="compressed">
                            <radio value="1" :checked="info.compressed==1"/>
                            <text>原视频</text>
                            <radio value="2" :checked="info.compressed==2"/>
                            <text>压缩</text>
                        </radio-group>
                    </div>
                </div>
                <div class="line" v-if="media_type==2">
                    <div class="label">视频状态</div>
                    <div class="input">
                        <div class="input"><input type="text" :value="info.video==''?'等待上传':'上传成功'" readonly></div>
                    </div>
                </div>
                <div class="media_box audio" v-if="media_type==1">
                    <div class="btnlist">
                        <div class="audio_btn" v-if="audio_start_time==0" @click="start_recorder()">
                            <div class="btn">开始录音</div>
                        </div>
                        <div class="audio_btn" v-if="audio_start_time>0" @click="stop_recorder()">
                            <div class="btn">完成录音</div>
                            <div class="time">{{audio_time_length}}</div>
                        </div>
                        <div class="play_btn" @click="play_audio()">
                            <div class="btn">试听</div>
                            <div class="time">{{play_time_length}}</div>
                        </div>
                    </div>
                    <text class="tip">录制时间请不要超过四分钟</text>
                </div>
                <div class="media_box video" v-if="media_type==2">
                    <div class="btnlist">
                        <div class="btn" @click="upload_video()">选择视频</div>
                        <div class="btn" @click="play_video()">播放视频</div>
                    </div>
                    <text class="tip">录制时间请不要超过四分钟\n为了防止作品丢失\n建议提前录制好视频后上传</text>
                </div>
            </div>
            <div class="form_box">
                <div class="title">个人信息</div>
                <div class="line">
                    <div class="label" v-if="form[4]">姓名</div>
                    <div class="input"><input type="text" data-name="name" placeholder="请输入" :value="info.name"
                                              @change="setinput"></div>
                </div>

                <div class="line" v-if="form[5]">
                    <div class="label">电话</div>
                    <div class="input"><input type="tel" data-name="tel" placeholder="请输入" :value="info.tel"
                                              @change="setinput"></div>
                </div>
                <div class="line" v-if="form[6]">
                    <div class="label">照片</div>
                    <div class="input"><div class="photo" @click="setphoto()">
                        <img v-if="info.photo==''"  src="/static/images/photo_btn.png" alt="">
                        <img v-else :src="resurl+info.photo+'?x-oss-process=image/resize,m_fill,w_80,h_80'" alt="">

                    </div></div>
                </div>

                <div class="line" v-if="form[7]">
                    <div class="label">性别</div>
                    <div class="input">
                        <radio-group @change="setsex" data-name="sex">
                            <radio value="1" :checked="info.sex==1"/>
                            <text>男</text>
                            <radio value="2" :checked="info.sex==2"/>
                            <text>女</text>
                        </radio-group>
                    </div>
                </div>
                <div class="title">学校信息</div>
                <div class="line" v-if="form[8]">
                    <div class="label">年级</div>
                    <div class="input">
                        <picker @change="setgrade" :value="grade_index" :range="grade_list" range-key="name">
                            <view class="picker">{{grade_list[grade_index]['name']}}
                            </view>
                        </picker>
                    </div>
                </div>
                <div class="line" v-if="info.grade!==''&& info.grade!==13">
                    <div class="label">学校</div>
                    <div class="input"><input type="text" data-name="school" placeholder="请输入" :value="info.school"
                                              @change="setinput"></div>
                </div>

                <div class="line" v-if="info.grade!==''&& info.grade!==13">
                    <div class="label">班级</div>
                    <div class="input"><input type="text" data-name="clazz" placeholder="请输入" :value="info.clazz"
                                              @change="setinput"></div>
                </div>
            </div>
            <div class="submit_btn" @click="submit()">确定</div>
        </div>
        <div class="mask" v-if="video_url!=''">
            <div class="video_player">
                <video :src="video_url" controls></video>
                <div class="close_btn" @click="close_video()">关闭</div>
            </div>
        </div>
    </div>
</template>

<script>
    var that = null
    const recorderManager = wx.getRecorderManager()
    const innerAudioContext = wx.createInnerAudioContext()
    var timeer = null
    export default {
        data() {
            return this.datainit({
                video_url: '',
                area_id: 0,
                grade_index: 0,
                audio_start_time: 0,
                audio_time_length: '',
                play_time_length: '',
                grade_list: [
                    {level: "", name: "请选择"},
                    {level: 0, name: "学前"},
                    {level: 1, name: "一年级"},
                    {level: 2, name: "二年级"},
                    {level: 3, name: "三年级"},
                    {level: 4, name: "四年级"},
                    {level: 5, name: "五年级"},
                    {level: 6, name: "六年级"},
                    {level: 7, name: "七年级"},
                    {level: 8, name: "八年级"},
                    {level: 9, name: "九年级"},
                    {level: 10, name: "高一"},
                    {level: 11, name: "高二"},
                    {level: 12, name: "高三"},
                    {level: 13, name: "青年"},
                ],
                first_list: [],
                sub_list: [],
                info: {
                    name: "",
                    sex: 1,
                    tel: "",
                    title: "",
                    teacher: "",
                    school: "",
                    clazz: "",
                    first_area_id: 0,
                    first_area_name: "",
                    second_area_id: 0,
                    second_area_name: "",
                    type: 1,
                    audio: "",
                    video: "",
                    media_type: 1,
                    compressed: 1,
                    grade:"",
                    grade_str:"",
                    type_str:"诗歌散文",
                    media_type_str:"音频",
                    sex_str:"男",
                    compressed_str:"原视频",
                    video_direction:0,
                    photo:""
                },
                media_type:0,
                form:[]
            })
        },
        created() {
            that = this
            this.isready = true

        },
        onShow() {
        },
        mounted() {
            that.info.second_area_id=that.get("area_id")
            that.check()
            wx.setKeepScreenOn({
                keepScreenOn: true
            })
            recorderManager.onStart(() => {
                that.audio_start_time = that.gettime()
                that.setaudiotime()
                timeer = setInterval(function () {
                    that.setaudiotime()
                }, 1000)

            })
            recorderManager.onStop((res) => {
                clearInterval(timeer)
                that.audio_start_time = 0
                that.upload_oss(res.tempFilePath, "media/audio", 'res-caocan', function (filename) {
                    that.info.audio = filename
                })

            })
            innerAudioContext.autoplay = false
            innerAudioContext.onPlay(() => {

            })
            innerAudioContext.onStop(() => {
                that.play_time_length = ""
            })
            innerAudioContext.onEnded(() => {
                that.play_time_length = ""
            })
            innerAudioContext.onError((res) => {
            })
            innerAudioContext.onTimeUpdate(function () {
                that.play_time_length = that.sectostr(innerAudioContext.currentTime)
            })

        },
        methods: {
            init() {
                that.$post("api/area/info",{id:that.info.second_area_id},function (data) {
                    that.media_type=data.media_type
                    that.info.first_area_id=data.first_area_id
                    that.info.second_area_id=data.second_area_id
                    that.info.first_area_name=data.first_area_name
                    that.info.second_area_name=data.second_area_name
                    that.form = data.form
                })
            }
            , setgrade(e) {
                that.grade_index = e.target.value
                that.info.grade = that.grade_list[that.grade_index].level
                that.info.grade_str = that.grade_list[that.grade_index].name
            },
            upload_video(e) {
                wx.chooseVideo({
                    sourceType: ['album', 'camera'],
                    compressed: that.info.compressed == 2,
                    maxDuration: 240,
                    camera: 'back',
                    success(res) {
                        console.log(res.width/res.height)
                        that.info.video_direction=res.width/res.height<1?0:90
                        if (res.duration == null) {
                            that.toast("视频文件格式不正确")
                            return;
                        }
                        if (res.duration < 3) {
                            that.toast("视频文件太短")
                            return;
                        }
                        if (res.duration > 240) {
                            that.toast("视频文件超过了四分钟")
                            return;
                        }
                        that.upload_oss(res.tempFilePath, "media/video", 'resuv-caocan', function (filename) {
                            that.info.video = filename
                        })


                    }
                })
            },


            reset_area: function () {
                that.info.second_area_id = 0
                that.info.first_area_id = 0
                that.area_list()
            },
            setsex(e) {
                that.info.sex = e.target.value
                that.info.sex_str=that.info.sex==1?"男":"女"
            },
            settype(e) {
                that.info.type = e.target.value
                that.info.type_str=that.info.type==1?"诗歌散文":"小说故事"
            },
            setmedia_type(e) {
                that.info.media_type = e.target.value
                that.info.media_type_str=that.info.type==1?"音频":"视频"
            },
            setcompressed(e) {
                that.info.compressed = e.target.value
                that.info.compressed_str=that.info.type==1?"原视频":"压缩"
            },
            setinput(e) {
                that.info[e.target.dataset.name] = e.target.value
            },
            upload_oss(file, dir, bucket, cb,) {
                wx.showLoading({
                    title: '正在上传',
                })

                that.$post("api/index/getuploadkey", {bucket: bucket}, function (data) {
                    let filename = data.filename
                    var index1 = file.lastIndexOf(".");
                    var index2 = file.length;
                    var ext = file.substring(index1, index2);//后缀名
                    filename = filename + ext
                    filename = filename.toLowerCase()
                    let key =  dir + "/" + filename;
                    let file_config = {
                        url: data.host,
                        filePath: file,
                        name: 'file',
                        formData: {
                            name: filename,
                            key: key,
                            policy: data.policy,
                            OSSAccessKeyId: data.accessid,
                            success_action_status: "200",
                            signature: data.signature,
                        },
                        success: function (res) {
                            wx.hideLoading()
                            cb(key)
                        },
                        fail: function ({errMsg}) {
                            wx.showToast({
                                title: "上传失败",
                                duration: 1000
                            })
                        },
                    }
                    wx.uploadFile(file_config)
                })

            },
            play_video: function () {
                if (that.info.video == null || that.info.video == "") {
                    that.toast("请先上传视频")
                    return
                }
                wx.showModal({
                    title: '温馨提示',
                    content: '刚上传的视频不能及时预览播放，如不能播放，您可稍后几分钟后再次尝试',
                    success(res) {
                        if (res.confirm) {
                            let file = that.info.video + ".1280.mp4"
                            that.$post("api/index/signurl", {url: file}, function (data) {
                                that.video_url = data
                            })
                        } else if (res.cancel) {
                        }
                    }
                })

            }
            ,
            close_video: function () {
                that.video_url = ''
            },
            start_recorder() {
                let options = {
                    duration: 240000,
                    sampleRate: 44100,
                    numberOfChannels: 1,
                    encodeBitRate: 192000,
                    format: 'mp3',
                    frameSize: 50
                }

                recorderManager.start(options)
            },
            stop_recorder() {
                recorderManager.stop()
            },
            setaudiotime() {
                let audio_mid_time = that.gettime() - that.audio_start_time
                that.audio_time_length = that.sectostr(audio_mid_time)
            }
            ,
            play_audio() {
                if (that.info.audio == null || that.info.audio == "") {
                    that.toast("您尚未录制音频");
                    return;
                }
                innerAudioContext.src = that.resurl + that.info.audio
                innerAudioContext.play()
            },
            submit(){
                that.$post("api/writing/signup_pre",that.info,function (pre_token) {
                    wx.showModal({
                        title: '重要提示',
                        content: '请检查所有报名信息，确认无误后请点击确定，否则请点取消',
                        success(res) {
                            if (res.confirm) {
                                that.$post("api/writing/signup",{pre_token:pre_token},function (data) {
                                    let orderno=data.orderno
                                    let code=data.code
                                    that.$post("api/writing/pay",{orderno:orderno},function (pay_config) {
                                        wx.requestPayment({
                                            timeStamp: pay_config.timestamp,
                                            nonceStr: pay_config.nonceStr,
                                            package: pay_config.package,
                                            signType: 'MD5',
                                            paySign: pay_config.paySign,
                                            success(res) {
                                                wx.redirectTo({
                                                    url: '/pages/signup/share/main?code='+code
                                                })
                                            },
                                            fail(res) {
                                                wx.redirectTo({
                                                    url: '/pages/signup/list/main?statis=0'
                                                })
                                            }
                                        })
                                    })
                                })
                            } else if (res.cancel) {
                            }
                        }
                    })
                })


            },
            back(){
                wx.navigateBack()
            },
            setphoto(){
                wx.chooseImage({
                    success(res) {
                        let tempfilepath=res.tempFilePaths[0]
                        wx.getImageInfo({
                            src: tempfilepath,
                            success(res) {
                                if(res.width/res.height>1){
                                    that.toast("请上传竖版照片");
                                    return;
                                }
                                that.upload_oss(tempfilepath, "caocan/photo", 'res-caocan', function (filename) {
                                    that.info.photo = filename
                                })
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .app {
        padding-bottom: 20px;
    }

    .submit_btn {
        position: relative;
        width: 320px;
        height: 40px;
        line-height: 40px;
        color: #FFF;
        text-align: center;
        background: #ff6600;
        margin: auto;
    }

    .banner {
        width: 100%;
        height: 220px;
    }

    .video_player {
        position: relative;
        width: 240px;
        margin: auto;
        height: 426px;
        margin-top: 60px;

        video {
            width: 100%;
            height: 100%;
        }

        .close_btn {
            position: relative;
            color: #FFF;
            text-align: center;
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: #ff6600;
        }

    }


    .form {
        position: relative;
        width: 100%;
        margin: auto;
        overflow: hidden;
        min-height: 100px;
        font-size: 16px;

        .form_box {
            position: relative;
            width: 100%;
            margin: auto;
            background: #FFF;
            box-sizing: border-box;
            border-left: 10px solid #FFF;
            border-right: 10px solid #FFF;
            margin-top: 10px;
            margin-bottom: 10px;

            .title {
                position: relative;
                text-align: center;
                color: #666;
                line-height: 40px;
            }

            .line {
                position: relative;
                width: 100%;
                height: 40px;
                background: #FFF;
                line-height: 40px;
                display: flex;
                border-bottom: 1px solid #EEE;
                .photo{
                    position: relative;
                    display: block;
                    width: 40px;
                    height: 40px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .label {
                    width: 80px;
                    text-align: center;

            }

                .input {
                    flex: 1;
                    radio{
                        margin-left: 20px;
                    }
                    input {
                        height: 40px;
                    }
                }
            }
        }


        .audio {
            .tip {
                display: block;
                text-align: center;
                color: #666;
                line-height: 20px;
                font-size: 14px;
            }

            .btnlist {
                display: flex;

                .audio_btn {
                    width: 200px;
                    text-align: center;
                    height: 40px;
                    line-height: 40px;
                    background: #ff6600;

                    .btn {
                        width: 100%;
                        height: 25px;
                        color: #FFF;
                        line-height: 40px;
                    }

                    .time {
                        position: relative;
                        font-size: 12px;
                        text-align: center;
                        height: 15px;
                        line-height: 15px;
                        color: #FFF;
                    }
                }

                .play_btn {
                    flex: 1;
                    text-align: center;
                    height: 40px;
                    background: #efefef;

                    .btn {
                        width: 100%;
                        height: 25px;
                        color: #ff6600;
                        line-height: 40px;
                    }

                    .time {
                        position: relative;
                        font-size: 12px;
                        text-align: center;
                        height: 15px;
                        line-height: 15px;
                        color: #FFF;
                    }
                }
            }
        }


        .video {
            .tip {
                display: block;
                text-align: center;
                color: #666;
                line-height: 20px;
                font-size: 14px;
            }

            .btnlist {
                display: flex;

                .btn {
                    flex: 1;
                    text-align: center;
                    height: 40px;
                    line-height: 40px;
                    color: #FFF;
                }

                .btn:first-child {
                    color: #FFF;
                    background: #ff6600;
                }

                .btn:nth-child(2) {
                    background: #efefef;
                    color: #ff6600;
                }
            }
        }

        .media_box {
            position: relative;
            margin: auto;
            margin-top: 10px;
            margin-bottom: 10px;
            width: 300px;
            background: #FFF;
        }


    }


    .area {
        position: relative;
        width: 360px;
        margin: auto;
        background: #FFF;
        overflow: hidden;

        .title {
            position: relative;
            text-align: center;
            line-height: 40px;
            height: 40px;
            .reset{
                color: #ff6600;
            }
        }

        .area_list {
            overflow: hidden;

            .item {
                width: 25%;
                height: 40px;
                float: left;
                line-height: 40px;
                text-align: center;
            }
        }

    }
    radio .wx-radio-input.wx-radio-input-checked{
        border: none;
        background: #f00 !important;
    }
</style>

